<template>
	<coreshop-page title="排行榜" mode="left">
		<view class="list" v-if="state.list.length > 0">
			<view class="item" v-for="item,index in  state.list" :key="item.id">
				<view class="rank">
					<view class="rank-num" v-if="index <= 2">
						<image class="rank_icon"
							:src="handleStaticResources(`/static/images/distribution/0${index+1}.png`)"></image>
					</view>
					<view v-else class="rank-num">
						<view class="num">{{index+1}}</view>
					</view>
					<view class="member">
						<view class="nick_name">{{item.nickname}}</view>
						<view class="date">{{timeFormat(item.createtime,'yyyy年mm月dd日')}}</view>
					</view>
				</view>
				<view class="total">
					<view class="money">{{ item.totalInCome }}</view>
					<view class="income">累计收益</view>
				</view>
			</view>
			<view class="no-data" v-if="state.page === state.totalPages">没有更多了</view>
		</view>
		<view v-else class="layout-empty-box">
			<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
		</view>

	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { handleStaticResources } from '@/core/utils';
	import { queryDistributionRanking } from '@/core/api';
	import type { Response } from '@/core/models';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { EmptyEnum } from '@/core/enum';

	const state = reactive<{
		page : number;
		limit : number;
		totalPages : number;
		list : Array<any>;
	}>({
		page: 1,
		limit: 20,
		totalPages: 1,
		list: [],
	})

	onLoad(() => {
		getDistributionRanking();
	})

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getDistributionRanking();
		}
	})

	const getDistributionRanking = async () => {
		const ranking : Response<any> = await queryDistributionRanking({
			page: state.page,
			limit: state.limit
		});
		if (ranking.status) {
			state.totalPages = ranking.data?.totalPages;
			state.list = state.list.concat(ranking.data?.data);
		}
	}
</script>

<style scoped lang="scss">
	@import './index.scss';
</style>